<template>
  <div class="container-box">
    <!--筛选表单-->
    <div class="tag-form">
      <el-form ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.title" placeholder="请输入面试标题" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.subject" placeholder="请选择学科">
            <el-option
              value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.name" placeholder="请输入创建者" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.isTop" placeholder="是否置顶">
            <el-option
              value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.isCollect" placeholder="是否关注">
            <el-option
              value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="seacherSubject">搜索</el-button>
          <el-button icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div>
          <el-button icon="el-icon-plus" type="primary" size="small" plain @click="isShow=true,type='add'">创建</el-button>
        </div>
      </el-row>
    </div>
    <!--操作区域-->

    <!--表单区域-->

    <div class="table-box">
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="title" label="面试题标题" />
        <el-table-column prop="description" label="面试题描述" />
        <el-table-column prop="subject" label="所属学科">
          <template slot-scope="{row}">
            <span class="span_button">{{ row.subject }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isTop" label="是否置顶">
          <template slot-scope="{row}">
            <el-switch v-model="row.isTop" :active-value="1" :inactive-value="0" />
          </template>
        </el-table-column>
        <el-table-column prop="isCollect" label="是否关注">
          <template slot-scope="{row}">
            <el-switch v-model="row.isCollect" :active-value="1" :inactive-value="0" />
          </template>
        </el-table-column>
        <el-table-column prop="image" label="面试题封面">
          <template slot-scope="{row}">
            <img :src="row.image" alt="" class="image">
          </template>
        </el-table-column>
        <el-table-column prop="sciFactor" label="SCI影响因子">
          <template slot-scope="{row}">
            <span class="span_button">{{ row.sciFactor }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建者">
          <template slot-scope="{row}">
            <span class="span_button">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />

        <el-table-column label="操作">
          <template>
            <el-button size="small" type="primary" icon="el-icon-edit" circle />  &nbsp;&nbsp;
            <el-popconfirm title="确定删除吗">
              <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页区域-->
    <div class="page">
      <!-- 三个变量（页码，总数，每页数），两个事件（每页数量切换 ，页码切换） -->
      <el-pagination
        :current-page.sync="query.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @current-change="currentChange"
        @size-change="limitChange"
      >
        :pager-count="7">
      </el-pagination>
    </div>
    <el-dialog title="添加面试题" :visible.sync="isShow" width="45%">
      <el-form ref="form" label-width="120px" size="normal" :model="formData" :rules="rules">
        <el-row type="flex">
          <el-form-item label="面试题标题" prop="tagname">
            <el-input v-model="formData.tagname" style="width:240px" />
          </el-form-item>
          <el-form-item label="面试题描述" prop="tagname">
            <el-input v-model="formData.tagname" style="width:240px" />
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="创建者" prop="tagname">
            <el-input v-model="formData.tagname" style="width:240px" />
          </el-form-item>
          <el-form-item label="所属学科" prop="tagname">
            <el-input v-model="formData.tagname" style="width:240px" />
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="创建日期" prop="tagname">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              style="width:240px"
            />
          </el-form-item>
          <el-form-item label="面试题内容" prop="tagname">
            <el-input v-model="formData.tagname" style="width:240px" type="textarea" />
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="影响因子" prop="tagname">
            <el-input-number v-model="formData.sciFactor" :min="1" :max="100" label="描述文字" @change="handleChange" />
          </el-form-item>
          <el-form-item label="是否收藏" prop="tagname" label-width="180px">
            <el-switch v-model="formData.isCollect" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="是否置顶" prop="tagname">
            <el-switch v-model="formData.isTop" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-row>
        <!-- 图片上传 -->
        <el-form-item label="面试题封面" prop="tagname">
          <el-upload
            action="http://124.223.14.236:7005/admin/index/upload?mode=single&type=image"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="successUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-row type="flex" justify="center">
          <el-button>取消</el-button>
          <el-button v-if="type === 'edit'" type="primary">修改</el-button>
          <el-button v-else type="primary">新增</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getSubjectApi } from '@/api/subject'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      value1: '',
      type: '',
      isShow: false,
      // 表格数据
      list: [],
      // 回显照片
      fileList: [],
      // 查询参数(请求时携带的参数)
      query: {
        title: '',
        subject: '',
        name: '',
        isTop: '',
        isCollect: '',
        page: 1,
        limit: 10
      },
      total: 0,
      formData: {
        title: '',
        description: '',
        subject: '',
        isTop: '',
        isCollect: '',
        sciFactor: '',
        name: '',
        createTime: '',
        image: ''
      },
      rules: {
        tagname: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.type = 'edit'
    this.getSubjecList()
  },
  methods: {
    // 获取列表渲染
    async getSubjecList() {
      const res = await getSubjectApi(this.query)
      console.log(res)
      this.list = res.data.data.list
      this.total = res.data.data.total
    },
    // 查
    async seacherSubject() {
      this.getSubjecList()
    },

    // 上传图片
    handlePictureCardPreview(e) {
      console.log(e)
    },
    // 计数器的变化
    handleChange() {

    },

    successUpload(e) {
      console.log(e)
    },
    // 页码变动
    currentChange(value) {
      console.log(value)
      this.query.page = value
      this.getSubjecList()
    },
    // 每页数量变动
    limitChange(value) {
      this.query.limit = value
      this.getSubjecList()
    }
  }
}
</script>
<style scoped>
.container-box{
  padding: 30px;
}
.filter-form,
.tool-bar{
  /* border: 1px solid #ddd; */
  padding: 5px 15px 10px;
  margin-bottom: 10px;
}
.tag-form{
  display: flex;
  justify-content: space-between;
}
.image{
  width: 100px;
  height: 60px;
}
::v-deep .el-table td, .el-table th.is-leaf{
  text-align: center;
}
.span_button{
  color: #58acfa;
  background-color: #e8f5f7;
  cursor: pointer;
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #b5d8f8;
  border-radius: 3px;
}
::v-deep .el-table_1_column_1 .cell{
  padding: 0 !important;
  letter-spacing: 2px;
}
::v-deep .is-leaf {
  text-align: center;
}
::v-deep .el-dialog{
  height: 600px;
}
</style>
